<template>
  <div class="water_wrap">
    <div class="tab">
      <span
        v-for="(item, index) in tabTitList"
        :key="index"
        :class="{ activeTab: selectNum == index }"
        class="tabTit"
        @click="change(index)"
      >
        {{ item }}
      </span>
    </div>
    <div v-show="selectNum == 0" class="water-table">
      <ShortProllfx />
    </div>
    <div v-show="selectNum == 1" class="water-table">
      <ShortProymfx />
    </div>
  </div>
</template>

<script>
import ShortProllfx from './ShortProR_llfx.vue'
import ShortProymfx from './ShortProR_ymfx.vue'

export default {
    name: 'Water',
    components: {
        ShortProllfx,
        ShortProymfx
    },
    data() {
        return {
            selectNum: 0,
            tabTitList: ['流量分析', '淹没分析']
        }
    },
    created() {
        this.getDate()
    },
    methods: {
        async getDate() {

        },
        change(index) {
            // this.selectNum = index
        }
    }
}
</script>

<style lang="less" scoped>
.tab {
  justify-content: center;
}
</style>
